<template>
  <div>
    <el-tag
      v-if="tagList && tagList.length"
      :key="tagList[0].id"
      :closable="closable"
      type="info"
      @close="removeTag(tagList[0])"
    >
      {{ tagList[0].tagName && tagList[0].tagName.length > 8 ? `${tagList[0].tagName.slice(0, 8)}...` : tagList[0].tagName }}
    </el-tag>
    <el-popover v-if="tagList && tagList.length > 1" trigger="click">
      <div v-for="(tag, index) in tagList" :key="tag.id" class="pt-3 pb-3">
        <el-tag
          v-if="index > 0"
          :key="tag.id"
          :closable="closable"
          type="info"
          @close="removeTag(tag)"
        >
            {{ tag.tagName && tag.tagName.length > 8 ? `${tag.tagName.slice(0, 8)}...` : tag.tagName }}
        </el-tag>
      </div>
      <span slot="reference" class="colorZS fz-12 pl-5 cup">更多...</span>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    tagList: {
      type: Array,
      default: () => []
    },
    closable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {
    removeTag(tag){
      this.$emit('close', tag)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
